<template>
    <el-dialog :title="'分配权限'" :close-on-click-modal="false" :visible.sync="visible">
        <el-table :data="dataList" ref="permissionTable" border v-loading="dataListLoading" row-key="id"
            :tree-props="{ children: 'children' }" @selection-change="selectionChangeHandle" style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50" />
            <el-table-column prop="id" header-align="center" align="center" label="id" width="80" />
            <el-table-column prop="name" header-align="center" align="center" label="权限名称" />
            <el-table-column prop="url" header-align="center" align="center" label="权限路径" />
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            visible: false,
            dataList: [],
            dataListLoading: false,
            dataListSelections: null,
        }
    },
    methods: {
        init(id) {
            this.id = id || 0
            this.visible = true
            this.getPermissionList();
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val
        },
        // 表单提交
        dataFormSubmit() {
            this.$http({
                url: `/pms/admin/permission/grantPermission`,
                method: 'post',
                data: {
                    roleId: this.id,
                    permissionIds : this.dataListSelections.map(item => (item.id))
                }
            }).then((response) => {
                if (response == null || response.code != "0") {
                    this.$message.error(response.respMessage)
                    return;
                }

                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('refreshDataList')
                    }
                })
            })
        },
        getPermissionList() {
            this.$http({
                url: `/pms/admin/permission/listMenuInfoOfTree`,
                method: 'post',
                data: {
                }
            }).then((response) => {
                if (response && response.code == "0") {
                    this.dataList = response.data;
                    this.fillCheckStatus();
                } else {
                    this.$message.error(response.message)
                }
            })
        },
        fillCheckStatus() {
            this.$http({
                url: '/pms/admin/permission/listMenuInfo',
                method: 'post',
                data: {
                    roleId: this.id
                }
            }).then((response) => {
                if (response && response.code == "0") {
                    let selectedData = response.data.map(item => (item.id));
                    this.handleRowSelection(this.dataList, selectedData);
                } else {
                    this.$message.error(response.message)
                }
            })
        },
        // 处理每行数据的选中情况
        handleRowSelection(dataList, selectedData) {
            dataList.forEach(item => {
                if (selectedData.includes(item.id)) {
                    this.$refs.permissionTable.toggleRowSelection(item);
                }
                if (item.children && item.children.length > 0) {
                    this.handleRowSelection(item.children, selectedData);
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.el-select {
    width: 100%
}

.el-radio-group {
    display: flex;
    height: 40px;
    align-items: center;
}
</style>
